<template>
	<view>
		<view class="counte">组件生命周期 {{ counte }}</view>
		<view v-for="(item,index) in counte" :key="index">
			<span>{{index}}</span>
		</view>
		<!-- <keep-alive>
			<cpns-activated v-if="isShow"></cpns-activated>
		</keep-alive> -->
		<button @click="isShow = !isShow">切换</button>
		<button @click="counte++">添加</button>
	</view>
</template>

<script>
	import cpnsActivated from './cpns-activated.vue';
	export default {
		name:"cpns-life-cycle",
		components: {
			cpnsActivated
		},
		data() {
			return {
				isShow: true,
				counte: 1
			};
		},
		// 用途：用于初始化数据、设置默认值等。此时，组件的  data  属性已经被设置，但 DOM 还未被渲染。
		created() {
			console.log('created 组件实例被创建后立即调用');
		},
		// 用途：用于执行需要 DOM 元素的操作，例如获取 DOM 节点、启动定时器等。
		mounted() {
			console.log('mounted 组件被挂载到 DOM 后调用。');
		},
		// 用途：用于在数据更新前进行一些操作，例如保存当前状态。
		beforeUpdate() { // 浏览器不支持
			console.log('beforeUpdate 组件数据更新前调用');
		},
		// 用途：用于在数据更新后执行某些操作，例如重新计算 DOM 或更新视图。
		updated() { // 浏览器不支持
			console.log('updated 组件数据更新后调用。');
		},
		// 用途：用于清理资源，例如停止定时器、取消网络请求等。此时，组件仍然可以访问其数据和 DOM。
		beforeDestroy() {
			console.log('beforeDestroy 组件实例被销毁前调用。');
		},
		// 用途：用于在数据更新后执行某些操作，例如重新计算 DOM 或更新视图
		destroyed() {
			console.log('destroyed 组件数据更新后调用。');
		}
	}
</script>

<style>

</style>